<template>
    <div class="order-form-container">

        <!-- 表单区域 -->
        <div class="form-content">
            <div class="form-item">
                <div class="item-label">订单编号<span class="required-star">*</span></div>
                <van-field readonly :value="form.orderNo" placeholder="订单编号" class="form-input" />
            </div>

            <!-- 头像上传 -->
            <div class="form-item">
                <div class="item-label">图片<span class="required-star">*</span></div>
                <div class="avatar-upload">
                    <!-- <img :src="form.playerImg || defaultAvatar" class="avatar-preview"> -->
                    <van-uploader v-model="fileList">
                        <template #preview-cover="{ file }">
                            <div class="preview-cover van-ellipsis"></div>
                        </template>
                    </van-uploader>
                </div>
            </div>

            <!-- 备注信息 -->
            <div class="form-item">
                <div class="item-label">备注信息</div>
                <van-field v-model="form.playerRemark" type="textarea" placeholder="请输入补充说明（选填）" rows="2" autosize
                    class="form-input remark-input" />
            </div>

            <!-- 提交按钮 -->
            <div class="form-submit">
                <van-button block type="primary" class="submit-btn" @click="handleSubmit">
                    提交
                </van-button>
            </div>
        </div>
    </div>
</template>
  
<script>
import { Toast } from 'vant';
import userApi from '@/plugins/api/user'
import uploadApi from '@/plugins/api/upload'
import orderApi from '@/plugins/api/order' // 添加缺失的导入
import dealApi from '@/plugins/api/deal'
import gameApi from '@/plugins/api/game'
import { orderCaozuo, updateSelf } from '@/plugins/utils/caozuojilu'
import configApi from '@/plugins/api/config'

import { hostURL } from '@/plugins/utils/config'

export default {
    data() {
        return {
            form: {},
            self: this.$global.self,
            defaultAvatar: require('@/assets/avr.jpg'),
            fileList: []
        }
    },
    mounted() {
        this.form = JSON.parse(localStorage.getItem('orderItem'))
    },
    methods: {
        async handleAvatarUpload(file) {
            const res = await uploadApi.uploadImg(file.file)
            console.log(res);
            if (res.code === 200) {
                this.$toast.success('头像上传成功');
                this.form.playerImg = `${hostURL}/uploads/${res.data}`
            } else {
                this.$toast.fail(res.msg)
            }
        },
        async handleSubmit() {
            const that = this
            console.log(that.fileList);
            let imgUpload = false
            const imgArr = []
            if (that.fileList.length) {
                for (let i = 0; i < that.fileList.length; i++) {
                    const res = await uploadApi.uploadImg(that.fileList[i].file)
                    if (res.code === 200) {
                        const img = `${hostURL}/uploads/${res.data}`
                        imgArr.push(img)
                        imgUpload = true
                    } else {
                        imgUpload = false
                    }
                }
            }
            if (imgUpload) {
                console.log(imgArr);
                that.form.orderStatus = 3
                that.form.playerImg = imgArr.join(',')
                that.form.wanchengTime = new Date().getTime()
                console.log(that.form);
                const res = await orderApi.modify(that.form)
                if (res.code === 200) {
                    await orderCaozuo.update(that.form)
                    that.$router.back()
                } else {
                    that.$toast.fail(res.msg)
                }
            } else {
                that.$toast.fail('图片上传失败')
            }
        },
    }
}
</script>
  
<style lang="scss" scoped>
.order-form-container {
    padding: 16px;
    background: #fff;
    min-height: 100vh;
}

.form-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 24px;
    color: #333;
}

.form-content {
    background: #fff;
}

.form-item {
    margin-bottom: 20px;
}

.avatar-upload {
    display: flex;
    align-items: center;

    .avatar-preview {
        width: 60px;
        height: 60px;
        border-radius: 4px;
        object-fit: cover;
        margin-right: 12px;
        border: 1px solid #eee;
    }

    .upload-btn {
        padding: 6px 12px;
        background: #f7f8fa;
        border-radius: 4px;
        color: #1989fa;
        font-size: 14px;
    }
}

.item-label {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;

    .required-star {
        color: #f44;
        margin-left: 4px;
    }
}

.form-input {
    background: #f7f8fa;
    border-radius: 4px;
    padding: 12px 16px;

    &::placeholder {
        color: #969799;
    }
}

.amount-input {
    ::v-deep .van-field__control {
        color: #f44;
    }
}

.remark-input {
    ::v-deep .van-field__control {
        min-height: 60px;
    }
}

.form-submit {
    margin-top: 32px;
}

.submit-btn {
    background: #1989fa;
    border: none;
    border-radius: 4px;
    height: 44px;
    font-size: 16px;
}
</style>